<script lang="jsx">
import { defineComponent } from 'vue'
import { propTypes } from '@/utils/propTypes'
import Icon from './Icon'
import { ElTooltip } from 'element-plus'

export default defineComponent({
  name: 'Tooltip',
  props: {
    content: propTypes.string, // 显示的内容
    effect: propTypes.string.def('dark'), // Tooltip 主题，内置了 dark / light 两种
    placement: propTypes.string.def('top'), // Tooltip 组件出现的位置
    rawContent: propTypes.bool.def(true), // content 中的内容是否作为 HTML 字符串处理
    icon: propTypes.string.def('yiwen'), // 图标
    iconColor: propTypes.string.def('#888') // 图标颜色
  },
  setup(props) {
    return () => (
      <ElTooltip
        effect={props.effect}
        content={props.content}
        placement={props.placement}
        raw-content={props.rawContent}
      >
        <Icon name={props.icon} color={props.iconColor} />
      </ElTooltip>
    )
  }
})
</script>
